<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>后台管理首页</title>
    <!-- 先导入vue -->
    <script src="/js/vue.js"></script>
    <!-- element样式文件 -->
    <link rel="stylesheet" href="/element-ui/lib/theme-chalk/index.css">
    <!-- element的脚本 -->
    <script src="/element-ui/lib/index.js"></script>
    <!-- 导入axios -->
    <script src="/js/axios.js"></script>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <div class="header-content">
                <h1 class="header-title">汽车车服后台管理系统</h1>
                <div class="welcome-section">
                    <el-avatar icon="el-icon-user"></el-avatar>
                    <el-tag type="success">欢迎您：{{username}}</el-tag>
                </div>
            </div>
        </el-header>
        <el-container>
            <el-aside width="200px">
                <!--
                default-active 默认选中哪项
                88vh 垂直方向占比88%
                -->
                <el-menu
                        default-active="1-3"
                        class="el-menu-vertical-demo"
                        @select="handleMenuItemClick"
                        style="height:88vh"
                        @open="handleOpen"
                        @close="handleClose"
                       >
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>基础信息管理</span>
                        </template>
                        <el-menu-item index="1-1">
                            <i class="el-icon-location"></i>
                            <span>车辆类型管理</span>
                        </el-menu-item>
                        <el-menu-item index="1-2">
                            <i class="el-icon-location"></i>
                            <span>车辆管理</span>
                        </el-menu-item>
                        <el-menu-item index="1-3">
                            <i class="el-icon-location"></i>
                            <span>车辆保养记录</span>
                        </el-menu-item>
                        <el-menu-item index="1-4">
                            <i class="el-icon-location"></i>
                            <span>车辆维修记录</span>
                        </el-menu-item>
                        <el-menu-item index="1-5">
                            <i class="el-icon-location"></i>
                            <span>车辆事故记录</span>
                        </el-menu-item>
                        <el-menu-item index="1-6">
                            <i class="el-icon-location"></i>
                            <span>车辆年检记录</span>
                        </el-menu-item>
                        <el-menu-item index="1-7">
                            <i class="el-icon-location"></i>
                            <span>车辆保险记录</span>
                        </el-menu-item>
                    </el-submenu>
                    <el-menu-item index="2" @click="logout">
                        <i class="el-icon-guide"></i>
                        <span>退出</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-main>
<!--                scrolling:是否出现滚动条-->
                <iframe name="content" :src="url" width="99%" height="99%" scrolling="yes" style="border: none"></iframe>
            </el-main>
        </el-container>
    </el-container>
</div>

<script type="text/javascript">
    new Vue({
        el: "#app",
        data() {
            return {
                //用户名
                username:'',
                //显示的页面
                // url:'',
                url:'/pages/basic/carType.html',
                //创建一个页面集合对象
                urls:{
                    '1-1':'/pages/basic/carType.html',
                    '1-2':'/pages/basic/car.html',
                    '1-3':'/pages/basic/carMaintenance.html',
                    '1-4':'/pages/basic/carRepair.html',
                    '1-5':'/pages/basic/carAccident.html',
                    '1-6':'/pages/basic/carYearlyInspection.html',
                    '1-7':'/pages/basic/carInsurance.html'
                }
            }
        },
        mounted(){
            this.username=localStorage.getItem("username");
        },
        methods: {
            //处理菜单项的点击事件,参数是：index的值
            handleMenuItemClick(index,indexPath){
                console.log(`菜单项：${index},hehehe${indexPath}`);
                //换url的值即可
                this.url=this.urls[index];
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            //退出
            logout(){
                this.$confirm('真的要退出吗, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'info'
                }).then(() => {
                    //直接访问服务器地址
                    location.href='/user/logout';
                }).catch(() => {
                   console.log("取消退出")
                });
            }
        }
    })
</script>
<style>
    .header-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 20px;
        background: linear-gradient(135deg, #8bbef8, #FFFFFF);
    }

    .header-title {
        font-size: 24px;
        text-align: center;
        margin: 0;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    }

    .welcome-section {
        display: flex;
        align-items: center;
    }

    .welcome-section span {
        margin-left: 5px;
    }
</style>
</body>
</html>